import Component from "../Component.js";
import {LayerType, ServiceType} from "../../experience/db/SafeMonitorType.js";

export default class Uploader extends Component {
    constructor() {
        super();
    }

    // 上传Dxf文件
    async uploadDxf(mine_code, mine_name) {
        // 从input中获取文件信息
        const file = new FormData();
        const field = document.querySelector("input[type='file']");
        file.append("file", field.files[0]);
        file.append('uuid', mine_code);
        file.append('name', mine_name);
        file.append('code', mine_code);

        // 判断是否为dxf文件
        const name = field.files[0].name;
        const len = name.length;
        const dotDxf = name.substring(len-3, len);
        if (dotDxf === 'dxf') {
            // 上传dwg文件
            this.app.dialog.preloader("正在上传图纸...");

            const result = await this.api.uploadDxf(file);
            if (result.code === 0) {
                this.app.dialog.close();
                this.app.dialog.preloader("正在获取矿图...");

                // 从服务器获取文件数据
                const data = await this.api.getVector(result.data.meta_id);
                const sm_data = await this.api.getSmPositions(ServiceType.Mine_Id)
                data.data.entities.smgas = sm_data.data.filter((el) => {
                    return el.layer == LayerType.SMGas
                })
                data.data.entities.smstaff = sm_data.data.filter((el) => {
                    return el.layer == LayerType.SMStaff
                })
                data.data.entities.smbroadcast = sm_data.data.filter((el) => {
                    return el.layer == LayerType.SMBroadCast
                })
                data.data.entities.smvideo = sm_data.data.filter((el) => {
                    return el.layer == LayerType.SMVideo
                })
                if (data.code === 0) {
                    // 初始化config信息
                    this.drawer.init(data.data.meta, data.data.layers);
                    // 将从网络上取下来的数据存入数据库
                    this.db.init(data.data).then(() => {
                        // 从本地提取数据
                        this.drawer.location().then(() => {
                            this.app.dialog.close();
                            // 图纸更新完成之后，对cluster聚合图层也进行更新
                            this.drawer.initCluster()
                            // 图纸更新后，鹰眼缩略图也要进行更新
                            this.drawer.refreshSmallLayer()
                        })
                    })
                }
            }
        } else {
            this.app.toast.create({
                text: '请选择AutoCAD的.dxf格式的文件,其他格式文件无效。',
                position: 'top',
                closeButton: false,
                closeTimeout: 3000
            }).open();
        }
    }

    template() {
        const div = `
            <div class="popup upload-popup sm-uploader-pop" style="height: 220px;">
                <header>更新图纸</header>
                <article>
                    <div class="list inline-labels no-hairlines-md">
                        <ul>
                            <li class="item-content item-input">
                                <div class="item-inner">
                                    <input type="file" name="upload" accept=".dxf" />
                                </div>
                            </li>
                        </ul>
                    </div>
                </article>
                <footer class="uploader-footer">
                    <p style="flex: 3"></p>
                    <div style="flex: 1;width: 90px">
                        <button style="flex: 1" class="button button-fill color-theme-blue popup-close" id="upload">确定</button>
                    </div>
                    <div style="flex: 1;width: 90px">
                        <button  class="button button-fill color-gray popup-close">取消</button>
                    </div>
                </footer>
            </div>
        `
        this.$$('#app').append(div);
    }

    control() {
        // 创建 上传文件的弹窗
        this.popup = this.app.popup.create({ el: '.upload-popup' });
        this.$$("#upload-popup").on("click", () => {
            this.popup.open();
        });
        this.$$("#upload").on("click", async () => {
            // 直接给默认值
            const mine_code = 'person'
            const mine_name = 'v1'
            await this.uploadDxf(mine_code, mine_name);
        });
    }
}